<template>
  <view class="mine-container">
    <view class="mine_top" :style="'padding-top:' + topBottom + 'px'">
      <view class="m_t_login">
        <image
          v-if="!isLogin"
          :src="config.imgUrl + 'head.png'"
          style="width: 160rpx; height: 160rpx; border-radius: 50%"
          @click="handleToLogin"
        />
        <image
          v-else
          :src="userInfo.avatar"
          style="
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            border: 1px solid #333;
          "
        />
        <view class="name" @click="handleToLogin">
          <view
            class="nick_name"
            :style="{
              'font-size': isLogin ? '40rpx' : '64rpx',
            }"
            >{{ userInfo.nickName }}</view
          >
          <view class="phone">{{ userInfo.phonenumber }}</view>
        </view>
        <view class="shezhi" @click="setUp">
          <u-icon name="setting" color="#fff"></u-icon>
        </view>
      </view>
      <view class="m_t_nums">
        <view class="nums_left">
          <view
            v-for="(item, index) in numsArr"
            :key="index"
            style="text-align: center"
          >
            <view
              class="item_num"
              :style="{
                'font-weight': isLogin ? 'bolder' : '',
              }"
              >{{ item.num }}</view
            >
            <view>{{ item.text }}</view>
          </view>
        </view>
        <view class="complain" @click="toComplaints">投诉</view>
      </view>
      <view class="m_t_event">
        <view
          v-for="(item, index) in eventNumArr"
          :key="index"
          class="event_item"
          @click="handleEvent(index)"
        >
          <view class="event_text">
            <img :src="item.imgUrl" />
            <text>{{ item.text }}</text>
          </view>
          <view class="event_num">{{ item.num }}</view>
        </view>
      </view>

      <image class="login_bg" :src="config.imgUrl + 'bg.png'" />
    </view>
    <view class="mine_bottom">
      <view class="b_top">
        <u-tabs
          :current="tabCurrent"
          lineColor="#01756B"
          :list="tabList"
          lineWidth="28"
          style="text-align: center"
          @click="changeTab"
        ></u-tabs>
      </view>
      <view class="b_bottom">
        <scroll-view scroll-y style="height: 100%; padding-bottom: 80px; width: 100%">
          <liu-waterfall :dataList="collectOrLikeList" :column="2" bg-color="#F3F3F3" @item-click.stop="strategyDetail">
            <template #info="{ item }">
              <view style="padding: 0 9px 9px;">
                <text class="strategy-title">{{ item.title }}</text>
                <view class="strategy-info">
                  <view class="avatar">
                    <u-avatar :src="item.createUserInfo.avatar" size="20"></u-avatar>
                    <text>{{ item.createUserInfo.nickName }}</text>
                  </view>
                  <view class="heart" @click="strategyLike(item)">
                    <u-icon v-if="!item.checkLike" name="heart"></u-icon>
                    <u-icon v-else name="heart-fill" color="#0E9489"></u-icon>
                    <text>{{ item.strategyLikeNum }}</text>
                  </view>
                </view>
              </view>
            </template>
          </liu-waterfall>
          <u-loadmore status="loadmore" />
        </scroll-view>
      </view>
    </view>

    <tabs :current="4" />
  </view>
</template>

<script>
import config from "@/config";
import { getToken } from "@/utils/auth";
import {
  getPersonalCenterCount,
  orderCountApi // 待处理，未出行，待评价的数量
} from "@/api/mine";
import {getStrategyList, strategyLike, strategyLikeCance} from "@/api/introduction";

let mine_1 = config.imgUrl + "mine_1.png";
let mine_2 = config.imgUrl + "mine_2.png";
let mine_3 = config.imgUrl + "mine_3.png";

export default {
  data() {
    return {
      config,
      topBottom: 0,
      userInfo: {},
      tabCurrent: 0,
      tabList: [{ name: "收藏", scene: '5' }, { name: "点赞", scene: '4' }],
      // 处理中数量
      eventNumArr: [
        {
          text: "处理中",
          num: "暂无",
          imgUrl: mine_1,
        },
        {
          text: "未出行",
          num: "暂无",
          imgUrl: mine_2,
        },
        {
          text: "待评价",
          num: "暂无",
          imgUrl: mine_3,
        },
      ],
      // 关注数量
      numsArr: [
        {
          text: "关注",
          num: "-",
        },
        {
          text: "粉丝",
          num: "-",
        },
        {
          text: "评论",
          num: "-",
        },
        {
          text: "发布",
          num: "-",
        },
      ],
      isLogin: false,
      // 收藏/点赞列表
      collectOrLikeList: []
    };
  },
  computed: {
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    },
  },
  onLaunch() {},
  onShow() {
    this.getMenuButtonRect();

    this.isLogin = getToken() ? true : false;

    if (this.isLogin) {
      this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));

      // 处理中|未出行|待评价数量
      this.getOrderCount()
      
      // 我的统计信息
      this.getPersonalCenterCount()
      
      // 获取收藏和点赞数据
      const tabItem = this.tabList[this.tabCurrent]
      this.getCollectOrLikeList(tabItem.scene)

      // 关注数量
      this.numsArr = [
        {
          text: "关注",
          num: "10",
        },
        {
          text: "粉丝",
          num: "100",
        },
        {
          text: "评论",
          num: "2",
        },
        {
          text: "发布",
          num: "5",
        },
      ];
    } else {
      this.userInfo = {
        avatar: "",
        nickName: "嗨！请登录~",
        phonenumber: "",
      };
      // 处理中数量
      this.eventNumArr = [
        {
          text: "处理中",
          num: "暂无",
          imgUrl: mine_1,
        },
        {
          text: "未出行",
          num: "暂无",
          imgUrl: mine_2,
        },
        {
          text: "待评价",
          num: "暂无",
          imgUrl: mine_3,
        },
      ];
      // 关注数量
      this.numsArr = [
        {
          text: "关注",
          num: "-",
        },
        {
          text: "粉丝",
          num: "-",
        },
        {
          text: "评论",
          num: "-",
        },
        {
          text: "发布",
          num: "-",
        },
      ];
      this.collectOrLikeList = [];
    }
  },
  onLoad() {},
  methods: {
    // 攻略点赞
    async strategyLike(strategy) {
      let res
      if (strategy.checkLike) {
        // 取消点赞
        res = await strategyLikeCance({
          aimId: strategy.id
        })
      } else {
        // 新增点赞
        res = await strategyLike({
          aimId: strategy.id
        })
      }
      const {code, msg} = res
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      // 获取收藏和点赞数据
      const tabItem = this.tabList[this.tabCurrent]
      await this.getCollectOrLikeList(tabItem.scene)
    },
    // 获取统计数据
    async getPersonalCenterCount() {
      const { code, data, msg } = await getPersonalCenterCount()
      if (code !== 200) {
        this.$modal.showToast(msg)
        return
      }
      const { attentionNum, attentionedNum, commentNum, strategyNum } = data
      // 关注
      this.numsArr[0].num = attentionNum
      // 粉丝
      this.numsArr[1].num = attentionedNum
      // 评论
      this.numsArr[2].num = commentNum
      // 发布
      this.numsArr[3].num = strategyNum
    },
    // 查看详情
    strategyDetail(strategy) {
      uni.navigateTo({
        url: `/pages/Introduction/pages/detail?strategyId=${strategy.id}&createTime=${strategy.createTime}`
      })
    },
    // 切换列表
    changeTab(event) {
      this.tabCurrent = event.index
      this.getCollectOrLikeList(event.scene)
    },
    // 获取收藏列表
    async getCollectOrLikeList(scene = '5') {
      const { code, data, msg } = await getStrategyList({
        auditStatus: '1',
        scene
      })
      if (code !== 200) {
        this.$modal.showToast(msg)
        return
      }
      this.collectOrLikeList = data.rows
    },
    
    getOrderCount() {
      orderCountApi()
      .then((res) => {
        if(res.code == 200) {
          let data = res.data;
          this.eventNumArr[0].num = data.todoCount + "条";
          this.eventNumArr[1].num = data.useCount + "项预约";
          this.eventNumArr[2].num = data.judgeCount+ "条评价";
        } else {
          this.eventNumArr[0].num = "0条";
          this.eventNumArr[1].num = "0项预约";
          this.eventNumArr[2].num = "0条评价";
        }
      })
      .catch((err) => {
        this.eventNumArr[0].num = "0条";
        this.eventNumArr[1].num = "0项预约";
        this.eventNumArr[2].num = "0条评价";
      });
    },
    // 获取胶囊按钮位置位置信息
    getMenuButtonRect() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.topBottom = menuButtonInfo.bottom;

      // 通过res的属性来获取位置信息，例如res.width, res.height, res.top, res.right等
    },

    handleEvent(index) {
      if (this.isLogin) {
        if (index == 0) {
          uni.navigateTo({
            url: "/pages/mine/processing/index",
          });
        } else if (index == 1) {
          uni.navigateTo({
            url: "/pages/mine/notTraveled/index",
          });
        } else {
          uni.navigateTo({
            url: "/pages/mine/waitingComment/index",
          });
        }
      }
    },

    // 跳转登录页面
    handleToLogin() {
      if (!this.isLogin) {
        uni.navigateTo({
          url: "/pages/login",
        });
      }
    },

    // 退出登录
    handleLogout() {
      this.$modal.confirm("确定注销并退出系统吗？").then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$tab.reLaunch("/pages/index");
        });
      });
    },

    // 设置
    setUp() {
      uni.navigateTo({
        url: "./setting/index",
      });
    },

    scrolltolower(e) {
    },

    onScroll(e) {
      // console.log(e);
    },
    toComplaints() {
      uni.navigateTo({
        url: '/pages/complaints/index'
      })
    }
  },
};
</script>

<style lang="scss">
h1 {
  color: #000;
}

page {
  background-color: #f5f6f7;
  color: #fff;
}

.mine-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .mine_top {
    padding: 0 20rpx;
    width: 100%;
    padding-bottom: 5%;
    position: relative;

    .m_t_login {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        margin-left: 20rpx;
        flex: 2;
        text-align: left;

        .nick_name {
          color: #ffffff;
        }

        .phone {
          margin-top: 4rpx;
          font-size: 28rpx;
          color: #cbcfd3;
        }
      }

      .shezhi {
        width: 64rpx;
        height: 64rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 280rpx;
        border: 2rpx solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .m_t_nums {
      margin: 4.5% 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .nums_left {
        flex: 4;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .item_num {
          font-size: 36rpx;
        }
      }

      .complain {
        margin-left: 80rpx;
        text-align: center;
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 280rpx;
        border: 2rpx solid #ffffff;
      }
    }

    .m_t_event {
      margin: 4.5% 0;
      display: flex;
      align-content: center;
      justify-content: space-around;

      .event_item {
        color: #fff;
        width: 208rpx;
        height: 112rpx;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 8rpx;
        padding: 10rpx 12rpx;

        .event_text {
          font-size: 28rpx;
          color: #ffffff;
          display: flex;
          align-items: center;
          image {
            width: 26rpx;
            height: 28rpx;
            margin-right: 6rpx;
          }
        }

        .event_num {
          margin-top: 8rpx;
          font-size: 24rpx;
          color: #cbcfd3;
        }
      }
    }

    .login_bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
    }
  }

  .mine_bottom {
    width: 100%;
    height: calc(63% + 40rpx);
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    overflow: hidden;
    margin-top: -3%;
    background: #f3f3f3;

    .b_top {
      width: 100%;
      //height: 88rpx;
      padding-bottom: 16rpx;
      background: #fff;
    }

    .b_bottom {
      width: 100%;
      height: calc(100% - 88rpx);
      //padding: 20rpx 16rpx 0 16rpx;
      .strategy-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
        margin-top: 20rpx;
      }
      .strategy-info {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-content: center;
        color: #333333;

        .avatar {
          display: flex;
          align-items: center;

          text {
            font-size: 24rpx;
            margin-left: 5px;
          }
        }

        .heart {
          display: flex;
          align-items: center;
          color: #666666;
        }
      }

      .scroll_view {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

::v-deep .u-tabs__wrapper__nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
}

::v-deep .u-tabs__wrapper__nav__item {
  flex: 1 1 0% !important;
}
</style>
